<template>
    <el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
        <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="会员id" :label-width="formLabelWidth" prop="memberId">
                <fortress-select
                        v-model="form.memberId"
                        :dictList="memberIdList"
                        placeholder="请选择会员id"
                        clearable
                ></fortress-select>
            </el-form-item>
            <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="realName">
                <el-input
                        v-model="form.realName"
                        autocomplete="off"
                        placeholder="请输入真实姓名"
                ></el-input>
            </el-form-item>
            <el-form-item label="身份证号" :label-width="formLabelWidth" prop="cardNum">
                <el-input
                        v-model="form.cardNum"
                        autocomplete="off"
                        placeholder="请输入身份证号"
                ></el-input>
            </el-form-item>
            <el-form-item label="证件正面照片" :label-width="formLabelWidth" prop="imgFront">
                <fortress-upload
                  type="image"
                  name="imgFront"
                  :formData="form"
                ></fortress-upload>
            </el-form-item>
            <el-form-item label="证件背面照片" :label-width="formLabelWidth" prop="imgBack">
                <fortress-upload
                  type="image"
                  name="imgBack"
                  :formData="form"
                ></fortress-upload>
            </el-form-item>
            <el-form-item label="出生日期" :label-width="formLabelWidth" prop="birthday">
                <el-input
                        v-model="form.birthday"
                        autocomplete="off"
                        placeholder="请输入出生日期"
                ></el-input>
            </el-form-item>
            <el-form-item label="住址" :label-width="formLabelWidth" prop="address">
                <el-input
                        v-model="form.address"
                        autocomplete="off"
                        placeholder="请输入住址"
                ></el-input>
            </el-form-item>
            <el-form-item label="证件有效期" :label-width="formLabelWidth" prop="validityDate">
                <el-input
                        v-model="form.validityDate"
                        autocomplete="off"
                        placeholder="请输入证件有效期"
                ></el-input>
            </el-form-item>
            <el-form-item label="发证机关" :label-width="formLabelWidth" prop="issuingAuthority">
                <el-input
                        v-model="form.issuingAuthority"
                        autocomplete="off"
                        placeholder="请输入发证机关"
                ></el-input>
            </el-form-item>
            <el-form-item label="民族" :label-width="formLabelWidth" prop="nation">
                <el-input
                        v-model="form.nation"
                        autocomplete="off"
                        placeholder="请输入民族"
                ></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
                <el-input
                        v-model="form.gender"
                        autocomplete="off"
                        placeholder="请输入性别"
                ></el-input>
            </el-form-item>
            <el-form-item label="营业执照类型" :label-width="formLabelWidth" prop="cardType">
                <el-input
                        v-model="form.cardType"
                        autocomplete="off"
                        placeholder="请输入营业执照类型"
                ></el-input>
            </el-form-item>
            <el-form-item label="法定代表人" :label-width="formLabelWidth" prop="person">
                <el-input
                        v-model="form.person"
                        autocomplete="off"
                        placeholder="请输入法定代表人"
                ></el-input>
            </el-form-item>
            <el-form-item label="注册资本" :label-width="formLabelWidth" prop="capital">
                <el-input
                        v-model="form.capital"
                        autocomplete="off"
                        placeholder="请输入注册资本"
                ></el-input>
            </el-form-item>
            <el-form-item label="经营范围" :label-width="formLabelWidth" prop="business">
                <el-input
                        v-model="form.business"
                        autocomplete="off"
                        placeholder="请输入经营范围"
                ></el-input>
            </el-form-item>
            <el-form-item label="公司名称" :label-width="formLabelWidth" prop="enterpriseName">
                <el-input
                        v-model="form.enterpriseName"
                        autocomplete="off"
                        placeholder="请输入公司名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="统一社会信用代码" :label-width="formLabelWidth" prop="creditCode">
                <el-input
                        v-model="form.creditCode"
                        autocomplete="off"
                        placeholder="请输入统一社会信用代码"
                ></el-input>
            </el-form-item>
            <el-form-item label="成立日期" :label-width="formLabelWidth" prop="regDate">
                <el-input
                        v-model="form.regDate"
                        autocomplete="off"
                        placeholder="请输入成立日期"
                ></el-input>
            </el-form-item>
            <el-form-item label="营业期限" :label-width="formLabelWidth" prop="businessTerm">
                <el-input
                        v-model="form.businessTerm"
                        autocomplete="off"
                        placeholder="请输入营业期限"
                ></el-input>
            </el-form-item>
            <el-form-item label="住所" :label-width="formLabelWidth" prop="residence">
                <el-input
                        v-model="form.residence"
                        autocomplete="off"
                        placeholder="请输入住所"
                ></el-input>
            </el-form-item>
            <el-form-item label="登记机关" :label-width="formLabelWidth" prop="regAuthority">
                <el-input
                        v-model="form.regAuthority"
                        autocomplete="off"
                        placeholder="请输入登记机关"
                ></el-input>
            </el-form-item>
            <el-form-item label="发证日期" :label-width="formLabelWidth" prop="awardDate">
                <el-input
                        v-model="form.awardDate"
                        autocomplete="off"
                        placeholder="请输入发证日期"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
            <el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
            <el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
    import { memberrealinfoInfo, memberrealinfoSave, memberrealinfoEdit } from "@/api/member/memberrealinfo.js";
    import { urlList, } from "@/api/public.api.js";
    
    export default {
        data() {
            return {
                visible: false,
                form: {
                    memberId:"",
                    realName:"",
                    cardNum:"",
                    imgFront:"",
                    imgBack:"",
                    birthday:"",
                    address:"",
                    validityDate:"",
                    issuingAuthority:"",
                    nation:"",
                    gender:"",
                    cardType:"",
                    person:"",
                    capital:"",
                    business:"",
                    enterpriseName:"",
                    creditCode:"",
                    regDate:"",
                    businessTerm:"",
                    residence:"",
                    regAuthority:"",
                    awardDate:"",
                },
                formLabelWidth: "120px",
                rules: {
                },
                memberIdList:[],
            };
        },
        created() {
        },
        methods: {
            queryUrlList(){
                this.memberIdList = [];
                urlList("/member/member/list").then((resp) => {
                  if (resp.code == 0) {
                    if (resp.data) {
                      resp.data.forEach((item) => {
                        this.memberIdList.push({ code: item.id, name: item.nickName });
                      });
                    }
                  }
                });
            },
            init(id) {
                this.resetForm();
                this.queryUrlList();
                //修改
                if (id) {
                    memberrealinfoInfo(id).then((resp) => {
                        if (resp.code == 0) {
                            this.$nextTick(() => {
                                this.form = {
                                    ...this.form,
                                    ...resp.data,
                                };
                            });
                        } else {
                            this.$msg({
                                message: resp.msg,
                                type: "error",
                            });
                        }
                    });
                }
                this.visible = true;
            },
            //提交表单数据
            submitForm() {
                this.$refs["form"].validate((valid) => {
                if (valid) {
                    //修改
                    if (this.form.id) {
                        memberrealinfoEdit(this.form).then((resp) => {
                            if (resp.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!",
                                });
                            this.$emit("refreshData");
                            this.visible = false;
                            } else {
                                this.$msg({
                                    message: resp.msg,
                                    type: "error",
                                });
                            }
                        });
                    //新增
                    } else {
                        memberrealinfoSave(this.form).then((resp) => {
                            if (resp.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!",
                                });
                                this.$emit("refreshData");
                                this.visible = false;
                            } else {
                                this.$msg({
                                    message: resp.msg,
                                    type: "error",
                                });
                            }
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
                });
            },
            resetForm() {
                this.form = {
                    memberId:"",
                    realName:"",
                    cardNum:"",
                    imgFront:"",
                    imgBack:"",
                    birthday:"",
                    address:"",
                    validityDate:"",
                    issuingAuthority:"",
                    nation:"",
                    gender:"",
                    cardType:"",
                    person:"",
                    capital:"",
                    business:"",
                    enterpriseName:"",
                    creditCode:"",
                    regDate:"",
                    businessTerm:"",
                    residence:"",
                    regAuthority:"",
                    awardDate:"",
                };
                this.$nextTick(() => {
                    if (this.$refs["form"]) {
                        this.$refs["form"].resetFields();
                    }
                });
            },
        },
    };
</script>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        max-height: 274px;
        padding: 7px;
        overflow: hidden;
        overflow-y: auto;
        font-weight: normal;
    }
</style>
